<!DOCTYPE HTML>
<html>
	<head>
		<title>mobiletuts phonegap</title>
		<script src="phonegap-1.2.0.js"></script>		
		<!--
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
		-->
		<link rel="stylesheet" href="jquery.mobile-1.3.1.min.css" />
		<script src="jquery-1.9.1.min.js"></script>
		<script src="jquery.mobile-1.3.1.min.js"></script>
	</head>
	<body onload="onLoad();">
		<!-- ============================================== Homepage ============================================== -->
		<div data-role="page" id="home" data-theme="a">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header" data-position="fixed">
				<h3>Asset Tracking</h3>
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content">
				<div align="center">					
					<h4>Contacts</h4>
					<a href="#new_contact" data-role="button" id="home_newContactButton" data-icon="star" data-theme="e" data-inline="true" data-mini="true"  data-transition="slide">New Contact</a>
					<a href="#contact_list" data-role="button" id="home_contactListButton" data-icon="bars" data-theme="e" data-inline="true" data-mini="true" data-transition="slide">Contact List</a>
				</div>
				<div align="center">
					<h4>Assets</h4>
					<a href="#new_asset" data-role="button" id="home_newAssetButton" data-icon="star" data-theme="b" data-inline="true" data-mini="true" data-transition="slide">New Asset</a>
					<a href="#asset_list" data-role="button" id="home_assetListButton" data-icon="bars" data-theme="b" data-inline="true" data-mini="true" data-transition="slide">Asset List</a>
					<h4>Asset Reports</h4>
					<div data-role="controlgroup" data-mini="true" data-them="c">
						<a href="#asset_report" data-role="button" id="home_byCategoryButton" data-icon="grid" data-theme="d" data-mini="true" data-transition="pop">By Category</a>
						<a href="#asset_report" data-role="button" id="home_byLocationButton" data-icon="grid" data-theme="d" data-mini="true" data-transition="pop">By Location</a>
						<a href="#asset_report" data-role="button" id="home_byOwnerButton" data-icon="grid" data-theme="d" data-mini="true" data-transition="pop">By Owner</a>
						<a href="#asset_report" data-role="button" id="home_byRetiredButton" data-icon="grid" data-theme="d" data-mini="true" data-transition="pop">By Retired Date</a>
					</div>
				</div>
			</div>
			<!-- = = = = = = = = = = = = Footer = = = = = = = = = = = = -->
			<div data-role="footer" data-position="fixed">
				<h3>Sutolym - HaPV</h3>
			</div>
		</div>
		
		<!-- ============================================== New Contact Page ============================================== -->
		<div data-role="page" id="new_contact">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header" data-position="fixed">
				<h3>New Contact</h3>
				<a href="#home" data-role="button" data-icon="home" data-theme="e" data-mini="true" data-transition="slide" data-direction="reverse">Home</a>	
				<a data-rel="back" data-role="button" data-icon="arrow-l" data-theme="d" data-mini="true">Back</a>
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content" data-theme="a">
				<!-- - - - - -  - - - - - Name - - - - -  - - - - -  -->
				<div class="ui-grid-a" data-mini="true">
					<div class="ui-block-a" style="width:20%">
						<img id="avatar" src="images/avatar.png" height="100" width="100" alt="avatar"></img>
					</div>
					<div class="ui-block-b" style="width:80%">	
						<div data-role="fieldcontain">
							<div data-role="fieldcontain" data-vertical="false">
								<label for="nc_fname_input">First Name: </label>
								<input id="nc_fname_input" name="nc_fname_input" type="text"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="nc_lname_input">Last Name: </label>
								<input id="nc_lname_input" name="nc_lname_input" type="text"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="nc_company_input">Company: </label>
								<input id="nc_company_input" name="nc_company_input" type="text"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="nc_job_title_input">Job Title: </label>
								<input id="nc_job_title_input" name="nc_job_title_input" type="text"></input>
							</div>
						</div>
					</div>
				</div>
				<!-- - - - - -  - - - - - Other details - - - - -  - - - - -  -->
				<div data-role="fieldcontain">
					<div data-role="fieldcontain" data-vertical="false">
						<label for="nc_business_phone_input">Business Phone:</label>
						<input id="nc_business_phone_input" name="nc_business_phone_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="nc_home_phone_input">Home Phone: </label>
						<input id="nc_home_phone_input" name="nc_home_phone_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="nc_mobile_phone_input">Mobile Phone: </label>
						<input id="nc_mobile_phone_input" name="nc_mobile_phone_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="nc_fax_number_input">Fax Number: </label>
						<input id="nc_fax_number_input" name="nc_fax_number_input" type="text"></input>
					</div>
					<p><br/></p>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="nc_street_input">Street: </label>
						<input id="nc_street_input" name="nc_street_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="nc_city_input">City: </label>
						<input id="nc_city_input" name="nc_city_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="nc_state_input">State/Province: </label>
						<input id="nc_state_input" name="nc_state_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="nc_country_input">Country/Region: </label>
						<input id="nc_country_input" name="nc_country_input" type="text"></input>
					</div>
					<textarea data-theme="b" name="nc_note_textarea" id="nc_note_textarea" data-mini="true" placeholder="Note"></textarea>
				</div>
			</div>
			<!-- = = = = = = = = = = = = Footer = = = = = = = = = = = = -->
			<div data-role="footer" data-position="fixed" class="ui-bar">
				<a href="#contact_details" id="create_contact_button" data-role="button" data-icon="check" data-transition="slideup">Create</a>
				<a href="#home" id="cancel_new_contact_button" data-role="button" data-icon="delete" data-transition="slide">Cancel</a>
			</div>
		</div>
		
		<!-- ============================================== Contact Details Page ============================================== -->
		<div data-role="page" id="contact_details">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header" data-position="fixed">
				<h3>Contact Details</h3>
				<a href="#home" data-role="button" data-icon="home" data-theme="e" data-mini="true" data-transition="slide" data-direction="reverse">Home</a>	
				<a data-rel="back" data-role="button" data-icon="arrow-l" data-theme="d" data-mini="true">Back</a>
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content" data-theme="a">
				<!-- - - - - -  - - - - - Name - - - - -  - - - - -  -->
				<div class="ui-grid-a" data-mini="true">
					<div class="ui-block-a" style="width:20%">
						<img id="cdt_avatar" src="images/avatar.png" height="100" width="100" alt="avatar"></img>
					</div>
					<div class="ui-block-b" style="width:80%">	
						<div data-role="fieldcontain">
							<div data-role="fieldcontain" data-vertical="false">
								<label for="cdt_fname_input">First Name: </label>
								<input id="cdt_fname_input" name="cdt_fname_input" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="cdt_lname_input">Last Name: </label>
								<input id="cdt_lname_input" name="cdt_lname_input" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="cdt_company_input">Company: </label>
								<input id="cdt_company_input" name="cdt_company_input" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="cdt_job_title_input">Job Title: </label>
								<input id="cdt_job_title_input" name="cdt_job_title_input" type="text" readonly="readonly"></input>
							</div>
						</div>
					</div>
				</div>
				<!-- - - - - -  - - - - - Other details - - - - -  - - - - -  -->
				<div data-role="fieldcontain">
					<div data-role="fieldcontain" data-vertical="false">
						<label for="cdt_business_phone_input">Business Phone:</label>
						<input id="cdt_business_phone_input" name="cdt_business_phone_input" type="text" readonly="readonly"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="cdt_home_phone_input">Home Phone: </label>
						<input id="cdt_home_phone_input" name="cdt_home_phone_input" type="text" readonly="readonly"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="cdt_mobile_phone_input">Mobile Phone: </label>
						<input id="cdt_mobile_phone_input" name="cdt_mobile_phone_input" type="text" readonly="readonly"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="cdt_fax_number_input">Fax Number: </label>
						<input id="cdt_fax_number_input" name="cdt_fax_number_input" type="text" readonly="readonly"></input>
					</div>
					<p><br/></p>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="cdt_street_input">Street: </label>
						<input id="cdt_street_input" name="cdt_street_input" type="text" readonly="readonly"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="cdt_city_input">City: </label>
						<input id="cdt_city_input" name="cdt_city_input" type="text" readonly="readonly"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="cdt_state_input">State/Province: </label>
						<input id="cdt_state_input" name="cdt_state_input" type="text" readonly="readonly"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="cdt_country_input">Country/Region: </label>
						<input id="cdt_country_input" name="cdt_country_input" type="text" readonly="readonly"></input>
					</div>
					<p><br /></p>
					<textarea data-theme="b" name="cdt_note_textarea" id="cdt_note_textarea" data-mini="true" placeholder="No note about this contact" readonly="readonly"></textarea>
				</div>
			</div>
			<!-- = = = = = = = = = = = = Footer = = = = = = = = = = = = -->
			<div data-role="footer" data-position="fixed" class="ui-bar">				
				<a href="#edit_contact" id="edit_contact_button" data-role="button" data-icon="gear" data-transition="slideup">Edit</a>
				<a href="#delete_contact" data-rel="dialog" id="delete_contact_button" data-role="button" data-icon="delete" data-transition="pop">Delete</a>
			</div>
		</div>	
		
		<!-- ============================================== Edit Contact Page ============================================== -->
		<div data-role="page" id="edit_contact">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header" data-position="fixed">
				<h3>Edit Contact</h3>
				<a href="#home" data-role="button" data-icon="home" data-theme="e" data-mini="true" data-transition="slide" data-direction="reverse">Home</a>
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content" data-theme="a">
				<!-- - - - - -  - - - - - Name - - - - -  - - - - -  -->
				<div class="ui-grid-a" data-mini="true">
					<div class="ui-block-a" style="width:20%">
						<img id="avatar" src="images/avatar.png" height="100" width="100" alt="avatar"></img>
					</div>
					<div class="ui-block-b" style="width:80%">	
						<div data-role="fieldcontain">
							<div data-role="fieldcontain" data-vertical="false">
								<label for="ec_fname_input">First Name: </label>
								<input id="ec_fname_input" name="ec_fname_input" type="text"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="ec_lname_input">Last Name: </label>
								<input id="ec_lname_input" name="ec_lname_input" type="text"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="ec_company_input">Company: </label>
								<input id="ec_company_input" name="ec_company_input" type="text"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="ec_job_title_input">Job Title: </label>
								<input id="ec_job_title_input" name="ec_job_title_input" type="text"></input>
							</div>
						</div>
					</div>
				</div>
				<!-- - - - - -  - - - - - Other details - - - - -  - - - - -  -->
				<div data-role="fieldcontain">
					<div data-role="fieldcontain" data-vertical="false">
						<label for="ec_business_phone_input">Business Phone:</label>
						<input id="ec_business_phone_input" name="ec_business_phone_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="ec_home_phone_input">Home Phone: </label>
						<input id="ec_home_phone_input" name="ec_home_phone_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="ec_mobile_phone_input">Mobile Phone: </label>
						<input id="ec_mobile_phone_input" name="ec_mobile_phone_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="ec_fax_number_input">Fax Number: </label>
						<input id="ec_fax_number_input" name="ec_fax_number_input" type="text"></input>
					</div>
					<p><br/></p>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="ec_street_input">Street: </label>
						<input id="ec_street_input" name="ec_street_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="ec_city_input">City: </label>
						<input id="ec_city_input" name="ec_city_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="ec_state_input">State/Province: </label>
						<input id="ec_state_input" name="ec_state_input" type="text"></input>
					</div>
					<div data-role="fieldcontain" data-vertical="false">
						<label for="ec_country_input">Country/Region: </label>
						<input id="ec_country_input" name="ec_country_input" type="text"></input>
					</div>
					<textarea data-theme="b" name="ec_note_textarea" id="ec_note_textarea" data-mini="true" placeholder="Note"></textarea>
				</div>
			</div>
			<!-- = = = = = = = = = = = = Footer = = = = = = = = = = = = -->
			<div data-role="footer" data-position="fixed" class="ui-bar">
				<a href="#contact_details" id="save_contact_button" data-role="button" data-icon="check" data-transition="slideup">Save</a>
				<a href="#" data-rel="back" id="cancel_new_contact_button" data-role="button" data-icon="delete" data-transition="slide">Cancel</a>
			</div>
		</div>
		
		<!-- ============================================== Contact List page ============================================== -->
		<div data-role="page" id="contact_list" data-theme="a">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header" data-position="fixed">
				<h3>Contact List</h3>
				<a href="#home" data-role="button" data-icon="home" data-theme="e" data-mini="true" data-transition="slide" data-direction="reverse">Home</a>
				<a data-rel="back" data-role="button" data-icon="arrow-l" data-theme="d" data-mini="true">Back</a>				
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content">
				<ul id="contact_listview" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true" data-mini="true">								
				</ul>
				<p id="contact_list_status"></p>
			</div>
			<!-- = = = = = = = = = = = = Footer = = = = = = = = = = = = -->
			<div data-role="footer" data-position="fixed">
				<h3>Sutolym - HaPV</h3>
			</div>
		</div>	
		
		<!-- ============================================== New Asset Page ============================================== -->
		<div data-role="page" id="new_asset">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header" data-position="fixed">
				<a href="#home" data-role="button" data-icon="home" data-theme="e" data-mini="true" data-transition="slide" data-direction="reverse">Home</a>				
				<h3>New Asset</h3>
				<a href="#" data-role="button" data-rel="back" data-icon="arrow-l" data-theme="d" data-mini="true">Back</a>
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content" data-theme="a">
				<div data-role="fieldcontain">
					<label for="na_item_name_input">Item:</label>
					<input name="na_item_name_input" id="na_item_name_input" placeholder="Input the item name" type="text"></input>
				</div>
				<div data-role="navbar" id="new_asset_navbar">
					<ul>
						<li><a href="#" class="ui-btn-active" data-tab-class="tab1">Details</a></li>
						<li><a href="#" data-tab-class="tab2">Comments</a></li>
					</ul>						
				</div>
				<div class="tab_content">
					<!-- - - - - -  - - - - - Details tab - - - - -  - - - - -  -->
					<div class="tab1" id="asset_details_tab">						
						<div data-role="fieldcontain">
							<form>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="na_item_category_input">Category:</label>
									<input name="na_item_category_input" id="na_item_category_input" type="text""></input>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="na_item_manufacturer_input">Manufacturer:</label>
									<input name="na_item_manufacturer_input" id="na_item_manufacturer_input" type="text"></input>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="na_item_model_input">Model:</label>
									<input name="na_item_model_input" id="na_item_model_input" type="text"></input>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="na_item_acquired_date_input">Acquired Date:</label>
									<input type="date" name="na_item_acquired_date_input" id="na_item_acquired_date_input" value=""  />
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="na_item_purchase_price_input">Purchase Price:</label>
									<input name="na_item_purchase_price_input" id="na_item_purchase_price_input" value=""  />
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="na_item_current_value_input">Current Value:</label>
									<input name="na_item_current_value_input" id="na_item_current_value_input" type="text"></input>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="na_item_condition_select" class="select">Condition:</label>
									<select name="na_item_condition_select" id="na_item_condition_select" data-native-menu="false">
										<option value="Condition 1">Condition 1</option>
										<option value="Condition 2">Condition 2</option>
										<option value="Condition 3">Condition 3</option>
									</select>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="na_item_location_select" class="select">Location:</label>
									<select name="na_item_location_select" id="na_item_location_select" data-native-menu="false">
										<option value="Location 1">Location 1</option>
										<option value="Location 2">Location 2</option>
										<option value="Location 3">Location 3</option>
										<option value="Location 4">Location 4</option>
									</select>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="na_item_owner_select" class="select">Owner:</label>
									<select name="na_item_owner_select" id="na_item_owner_select" data-native-menu="false">										
									</select>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="na_item_retired_date_input">Retired Date:</label>
									<input type="date" name="na_item_retired_date_input" id="na_item_retired_date_input" value=""  />
								</div>
							</form>
						</div>
					</div>
					<!-- - - - - -  - - - - - Comments tab - - - - -  - - - - -  -->
					<div class="tab2 ui-screen-hidden" id="asset_comments_tab">
						<div data-role="groupcontainer">
							<form>
								<div data-role="content" data-theme="b" data-init="true" style="min-height:100px" id="na_asset_comment_history">
									<p>this is the comment of this asset</p>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<textarea data-theme="b" name="na_asset_new_comment" id="na_asset_new_comment" data-mini="true" style="width:90%" placeholder="Input your comment here"></textarea>	
									<a id="add_comment_btn" href="#" data-role="button" data-icon="plus" data-theme="b" data-inline="true">Add</a>
								</div>
							</form>
						</div>
					</div>
				</div>
				
			</div>
			<!-- = = = = = = = = = = = = Footer = = = = = = = = = = = = -->
			<div data-role="footer" data-position="fixed" class="ui-bar">				
				<a href="#asset_details" id="create_asset_button" data-role="button" data-icon="check">Create</a>
				<a href="#home" data-rel="back" id="cancel_new_asset_button" data-role="button" data-icon="delete">Cancel</a>
			</div>
		</div>
		
		<!-- ============================================== Asset Details Page ============================================== -->
		<div data-role="page" id="asset_details">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header" data-position="fixed">
				<h3>Asset Details</h3>
				<a href="#home" data-role="button" data-icon="home" data-theme="e" data-mini="true" data-transition="slide" data-direction="reverse">Home</a>	
				<a data-rel="back" data-role="button" data-icon="arrow-l" data-theme="d" data-mini="true">Back</a>
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content" data-theme="a">
				<div data-role="fieldcontain">
					<label for="ad_item_name_input">Item:</label>
					<input name="ad_item_name_input" id="ad_item_name_input" placeholder="Item name" type="text" readonly="readonly"></input>
				</div>
				<div data-role="navbar" id="new_asset_navbar">
					<ul>
						<li><a href="#" class="ui-btn-active" data-tab-class="tab1">Details</a></li>
						<li><a href="#" data-tab-class="tab2">Comments</a></li>
					</ul>						
				</div>
				<div class="tab_content">
					<!-- - - - - -  - - - - - Details tab - - - - -  - - - - -  -->
					<div class="tab1">						
						<div data-role="fieldcontain">
							<div data-role="fieldcontain" data-vertical="false">
								<label for="ad_item_category_input">Category:</label>
								<input name="ad_item_category_input" id="ad_item_category_input" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="ad_item_manufacturer_input">Manufacturer:</label>
								<input name="ad_item_manufacturer_input" id="ad_item_manufacturer_input" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<label for="ad_item_model_input">Model:</label>
								<input name="ad_item_model_input" id="ad_item_model_input" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">	
								<label for="ad_item_acquired_date_input">Acquired Date:</label>
								<input type="date" name="ad_item_acquired_date_input" id="ad_item_acquired_date_input" value=""  readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">	
								<label for="ad_item_purchase_price_input">Purchase Price:</label>
								<input name="ad_tem_purchase_price_input" id="ad_item_purchase_price_input" value="" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">	
								<label for="ad_item_current_value_input">Current Value:</label>
								<input name="ad_item_current_value_input" id="ad_item_current_value_input" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">	
								<label for="ad_item_condition_input" class="select">Condition:</label>
								<input name="ad_item_condition_input" id="ad_item_condition_input" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">	
								<label for="ad_item_location_input" class="select">Location:</label>
								<input name="ad_item_location_input" id="ad_item_location_input" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">	
								<label for="ad_item_owner_input" class="select">Owner:</label>
								<input name="ad_item_owner_input" id="ad_item_owner_input" type="text" readonly="readonly"></input>
							</div>
							<div data-role="fieldcontain" data-vertical="false">	
								<label for="ad_item_retired_date_input">Retired Date:</label>
								<input type="date" name="ad_item_retired_date_input" id="ad_item_retired_date_input" value="" readonly="readonly"></input>
							</div>
						</div>
					</div>
					<!-- - - - - -  - - - - - Comments tab - - - - -  - - - - -  -->
					<div class="tab2 ui-screen-hidden">
						<div data-role="groupcontainer">
							<div data-role="content" data-theme="b" data-init="true" style="min-height:100px" id="ad_asset_comment_history">
								
							</div>
							<div data-role="fieldcontain" data-vertical="false">
								<textarea data-theme="b" name="ad_asset_new_comment" id="ad_asset_new_comment" data-mini="true" style="width:90%" placeholder="Input your comment here"></textarea>	
								<a id="add_comment_btn" href="#" data-role="button" data-icon="plus" data-theme="b" data-inline="true">Add</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- = = = = = = = = = = = = Footer = = = = = = = = = = = = -->
			<div data-role="footer" data-position="fixed">
				<a href="#edit_asset" id="edit_asset_button" data-role="button" data-transition="pop" data-icon="gear" data-theme="d" data-mini="true">Edit</a>
				<a href="#delete_asset" data-rel="dialog" id="delete_asset_button" data-role="button" data-transition="pop" data-icon="delete">Delete</a>
			</div>
		</div>	
		
		<!-- ============================================== Edit Asset Page ============================================== -->
		<div data-role="page" id="edit_asset">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header" data-position="fixed">
				<a href="#home" data-role="button" data-icon="home" data-theme="e" data-mini="true" data-transition="slide" data-direction="reverse">Home</a>				
				<h3>Edit Asset</h3>
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content" data-theme="a">
				<div data-role="fieldcontain">
					<label for="ea_item_name_input">Item:</label>
					<input name="ea_item_name_input" id="ea_item_name_input" placeholder="Input the item name" type="text"></input>
				</div>
				<div data-role="navbar" id="new_asset_navbar">
					<ul>
						<li><a href="#" class="ui-btn-active" data-tab-class="tab1">Details</a></li>
						<li><a href="#" data-tab-class="tab2">Comments</a></li>
					</ul>						
				</div>
				<div class="tab_content">
					<!-- - - - - -  - - - - - Details tab - - - - -  - - - - -  -->
					<div class="tab1">						
						<div data-role="fieldcontain">
							<form>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="ea_item_category_input">Category:</label>
									<input name="ea_item_category_input" id="ea_item_category_input" type="text""></input>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="ea_item_manufacturer_input">Manufacturer:</label>
									<input name="ea_item_manufacturer_input" id="ea_item_manufacturer_input" type="text"></input>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="ea_item_model_input">Model:</label>
									<input name="ea_item_model_input" id="ea_item_model_input" type="text"></input>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="ea_item_acquired_date_input">Acquired Date:</label>
									<input type="date" name="ea_item_acquired_date_input" id="ea_item_acquired_date_input" value=""  />
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="ea_item_purchase_price_input">Purchase Price:</label>
									<input name="ea_item_purchase_price_input" id="ea_item_purchase_price_input" value=""  />
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="ea_item_current_value_input">Current Value:</label>
									<input name="ea_item_current_value_input" id="ea_item_current_value_input" type="text"></input>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="ea_item_condition_select" class="select">Condition:</label>
									<select name="ea_item_condition_select" id="ea_item_condition_select" data-native-menu="false">
										<option value="Condition 1">Condition 1</option>
										<option value="Condition 2">Condition 2</option>
										<option value="Condition 3">Condition 3</option>
									</select>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="ea_item_location_select" class="select">Location:</label>
									<select name="ea_item_location_select" id="ea_item_location_select" data-native-menu="false">
										<option value="Location 1">Location 1</option>
										<option value="Location 2">Location 2</option>
										<option value="Location 3">Location 3</option>
										<option value="Location 4">Location 4</option>
									</select>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="ea_item_owner_select" class="select">Owner:</label>
									<select name="ea_item_owner_select" id="ea_item_owner_select" data-native-menu="false">										
									</select>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<label for="ea_item_retired_date_input">Retired Date:</label>
									<input type="date" name="ea_item_retired_date_input" id="ea_item_retired_date_input" value=""  />
								</div>
							</form>
						</div>
					</div>
					<!-- - - - - -  - - - - - Comments tab - - - - -  - - - - -  -->
					<div class="tab2 ui-screen-hidden">
						<div data-role="groupcontainer">
							<form>
								<div data-role="content" data-theme="b" data-init="true" style="min-height:100px" id="ea_asset_comment_history">
									<p>this is the comment of this asset</p>
								</div>
								<div data-role="fieldcontain" data-vertical="false">
									<textarea data-theme="b" name="ea_asset_new_comment" id="ea_asset_new_comment" data-mini="true" style="width:90%" placeholder="Input your comment here"></textarea>	
									<a id="ea_add_comment_btn" href="#" data-role="button" data-icon="plus" data-theme="b" data-inline="true">Add</a>
								</div>
							</form>
						</div>
					</div>
				</div>
				
			</div>
			<!-- = = = = = = = = = = = = Footer = = = = = = = = = = = = -->
			<div data-role="footer" data-position="fixed" class="ui-bar">				
				<a href="#asset_details" id="save_edit_asset_button" data-role="button" data-icon="check">Save</a>
				<a href="#" data-rel="back" id="cancel_edit_asset_button" data-role="button" data-icon="delete">Cancel</a>
			</div>
		</div>
		
		<!-- ============================================== Asset List Page ============================================== -->
		<div data-role="page" id="asset_list" data-theme="a">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header" data-position="fixed">
				<h3>Asset List</h3>
				<a href="#home" data-role="button" data-icon="home" data-theme="e" data-mini="true" data-transition="slide" data-direction="reverse">Home</a>				
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content">
				<ul id="asset_listview" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true" data-mini="true">					
				</ul>
				<p id="asset_list_status"></p>
			</div>
			<!-- = = = = = = = = = = = = Footer = = = = = = = = = = = = -->
			<div data-role="footer" data-position="fixed">
				<h3>Sutolym - HaPV</h3>
			</div>
		</div>
		
		<!-- ============================================== Asset Report Page ============================================== -->
		<div data-role="page" id="asset_report">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header" data-position="fixed">
				<h3>Asset Report</h3>
				<a href="#home" rel="external" data-role="button" data-icon="home" data-theme="e" data-mini="true" data-transition="slide" data-direction="reverse">Home</a>				
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content" data-theme="a">
				<div data-role="fieldcontain" data-vertical="false">
					<label for="report_group_select">Group by:</label>
					<select name="report_group_select" id="report_group_select" data-native-menu="false">
						<option value="category">Category</option>
						<option value="location">Location</option>
						<option value="owner">Owner</option>
						<option value="retireddate">Retired Date</option>
					</select>
				</div>
				<ul id="report_listview" data-role="listview" data-filter="true" data-inset="true" data-mini="true">
					<!--<li><a href="#"></a></li>-->			
				</ul>
			</div>
			<!-- = = = = = = = = = = = = Footer = = = = = = = = = = = = -->
			<div data-role="footer" data-position="fixed">
				<h3 id="p1">Sutolym - HaPV</h3>
			</div>
		</div>
		
		<!-- ============================================== Delete Contact Dialog ============================================== -->
		<div data-role="page" id="delete_contact">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header">
				<h3>Delete Contact</h3>				
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content" data-theme="e">
				<p>If you delete this contact, every asset of this contact is delete too. Are you sure to delete this contact?</p>
				<div data-role="fieldcontain" data-vertical="false">
					<a href="#contact_list" data-role="button" data-icon="check" id="dc_yes_button" data-transition="pop">Yes</a>
					<a data-role="button" data-icon="delete" data-rel="back" id="dc_no_button">No</a>
				</div>
			</div>
		</div>
		
		<!-- ============================================== Delete Asset Dialog ============================================== -->
		<div data-role="page" id="delete_asset">
			<!-- = = = = = = = = = = = = Header = = = = = = = = = = = = -->
			<div data-role="header">
				<h3>Delete Asset</h3>				
			</div>
			<!-- = = = = = = = = = = = = Content = = = = = = = = = = = = -->
			<div data-role="content" data-theme="e">
				<p>Are you sure to delete this asset?</p>
				<div data-role="fieldcontain" data-vertical="false">
					<a href="#asset_list" data-role="button" data-icon="check" id="da_yes_button" data-transition="pop">Yes</a>
					<a data-role="button" data-icon="delete" data-rel="back" id="da_no_button">No</a>
				</div>
			</div>
		</div>
		<script src="index.js"></script>		
	</body>
</html>